<template>
  <div class="dashboard-container">
    <MdEditor
      ref="editorRef"
      v-model="props.modelValue"
      :editorId="editorId"
      :language="params.lang"
      :theme="params.theme"
      :previewTheme="params.previewTheme"
      :codeTheme="params.codeTheme"
      :toolbars="toolbars"
      :footers="['markdownTotal', '=', 0, 'scrollSwitch']"
      :inputBoxWitdh="params.inputBoxWitdh"
      showCodeRowNumber
      autoDetectCode
      @onUploadImg="uploadImg"
      @onChange="onChange"
    >
      <template #defToolbars>
        <Mark/>
        <Emoji/>
        <UploadVideo/>
        <ExportPDF
          :modelValue="props.modelValue"
          fileName="导出pdf"
          height="700px"
          @onSuccess="onSuccess"
          @onProgress="onProgress"
        />
      </template>
    </MdEditor>
  </div>
</template>

<script setup lang="ts">

import UploadVideo from "@/components/UploadVideo.vue";

defineOptions({
  name: "MdEditorV3",
  inheritAttrs: false,
});
import {MdEditor, ExposeParam} from 'md-editor-v3';
import {ref} from 'vue';
import 'md-editor-v3/lib/style.css';
import {message} from '@vavt/message';
import {Emoji, Mark, ExportPDF} from '@vavt/v3-extension';
import '@vavt/v3-extension/lib/asset/style.css';
import { h } from 'vue'

const props = defineProps({
  editorId: {
    required: true,
    type: String,
    default: 'editor',
  },
  modelValue: {
    required: true,
    type: String
  }
})

const emit = defineEmits<(e: "update:modelValue", value: string) => void>()
function onChange(value) {
  emit('update:modelValue', value)
}
const editorRef = ref<ExposeParam>();

const params = ref({
  text: "zh-CN",
  modalVisible: false,
  modalFullscreen: false,
  inputBoxWitdh: '50%',
  theme:'default',
  previewTheme:'mk-cute',
  codeTheme:'atom'
});
const onProgress = ({ratio}: any) => {
  if (updateRatio) {
    updateRatio(`导出进度: ${ratio * 100}%`);
  } else {
    const {close, update} = message.info(`导出进度: ${ratio * 100}%`, {
      zIndex: 999999,
      duration: 0
    });
    updateRatio = update;
    closrRatio = close;
  }
};

const onSuccess = () => {
  closrRatio();

  setTimeout(() => {
    updateRatio = undefined;
  }, 100);

  message.success('Export successful.', {
    zIndex: 999999
  });
};

let updateRatio: ((str: string) => void) | undefined;
let closrRatio = () => {};

const uploadImg = async (files: Array<File>, callback: (urls: string[]) => void) => {
  const res = await Promise.all(
    files.map((file) => {
      return new Promise((rev, rej) => {

      });
    })
  );

  callback(res.map((item: any) => item.data.url));
};

const toolbars = ref([
  'bold',
  'underline',
  'italic',
  'strikeThrough',
  '-',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  0,
  1,
  2,
  3,
  '-',
  'revoke',
  'next',
  'save',
  '=',
  'prettier',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'previewOnly',
  'htmlPreview',
  'catalog',
  'github'
])

</script>

<style lang="scss" scoped>
.project-preview {
  padding: 2rem;

  .tips-text {
    color: #777;
  }
}
</style>
